<template>
  <div>
    <input type="file" @change="change" multiple @click="clickHandle">
  </div>
</template>
<script>
import { defineComponent } from 'vue';
import jszip from 'jszip'
let arrImgs = []
fetch("./template.zip").then(response => response.blob()).then(blob => jszip.loadAsync(blob)).then((result) => {
  arrImgs = result
})

export default defineComponent({
  methods: {
    clickHandle(ev) {
      ev.target.value = ''
    },
    change(event) {
      for (let i = 0; i < event.target.files.length; i++) {
        const file = event.target.files[i];

        if (!file) return
        jszip.loadAsync(file)
          .then(zip => {
            const files = Object.keys(zip.files);
            // const tempArr = files.filter(filename => filename.includes('template'))
            const tempArr = Object.keys(arrImgs.files)
            files.forEach(filename => {
              // console.log('filename', filename, zip.files[filename])
              if (filename.includes('管理性文件')) return
              // if (filename.includes('template')) return
              if (!zip.files[filename].dir) {
                const yuan = filename.split('.')[1]
                let isBtn = false
                for (let i = 0; i < tempArr.length; i++) {
                  const temp = tempArr[i].split('.')[1]
                  // debugger
                  if (temp && yuan && yuan.toLocaleLowerCase() === temp.toLocaleLowerCase()) {
                    zip.file(filename, arrImgs.files[tempArr[i]].async('arrayBuffer'));
                    isBtn = true
                    break
                  }
                }

                if (!isBtn) {
                  zip.file(filename, '');
                }
                // zip.files[filename].async('string').then(fileData => {
                //   console.log(filename); // 打印文件名和文件内容
                // });
              }

            });
            zip.generateAsync({ type: "blob" })
              .then(content => {
                const date = new Date()
                const url = URL.createObjectURL(content);

                // 创建一个a标签用于下载
                const downloadLink = document.createElement("a");
                downloadLink.href = url;
                downloadLink.download = `${file.name.split('.')[0]}_${date.getFullYear()}${date.getMonth() + 1}${date.getDate()}.zip`; // 下载文件的名称

                // 添加链接到body
                document.body.appendChild(downloadLink);

                // 模拟点击下载链接
                downloadLink.click();

                // 清理临时的URL对象
                URL.revokeObjectURL(url);

                // 清理创建的元素
                document.body.removeChild(downloadLink);
              });
          })
      }

    }
  }

});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

/* "jszip": "^3.10.1" */
</style>
